<#cenluan title="${'查看照片-'+gallery.title}" menu="gallery">
	<ol class="breadcrumb">
		<li><a href="/gallery">相册</a></li>
		<li>${gallery.html}</li>
		<li><a href="/photo/${gallery.id}">照片</a></li>
		<li>照片详情</li>
	</ol>
	<div class="row">
		<div class="col-md-8">
			<img src="${photo.url}@!photo-show" class="img-responsive center-block mb20">
		</div>
		<div class="col-md-4 text-center">
			<p>
				${photo.creater.html}
				上传于${photo.createTime,prettyTime}，${photo.viewCount}人看过，<span id="favorite-count">${photo.favoriteCount}</span>人收藏
			</p>
			<div class="input-group mb10">
				<span class="input-group-btn">
					<%if(!isEmpty(previous)){%>
						<a class="btn btn-default" href="/photo/show/${previous}?order=${order!'0'}">
							<span class="glyphicon glyphicon-chevron-left"></span>&nbsp;上一张
						</a>
					<%}else{%>
						<button class="btn btn-default disabled">
							<span class="glyphicon glyphicon-chevron-left"></span>&nbsp;上一张
						</button>
					<%}%>
				</span>
				<span class="input-group-addon" style="width:101%;border-left: none;">
					${index}/${count}
				</span>
				<span class="input-group-btn">
					<%if(!isEmpty(next)){%>
						<a class="btn btn-default" href="/photo/show/${next}?order=${order!'0'}">
							下一张&nbsp;<span class="glyphicon glyphicon-chevron-right"></span>
						</a>
					<%}else{%>
						<button class="btn btn-default disabled">
							下一张&nbsp;<span class="glyphicon glyphicon-chevron-right"></span>
						</button>
					<%}%>
				</span>
			</div>
			<%//功能区域%>
			<div id="action-area">
			<p>
				<button class="btn btn-default btn-block" <%if(!favorited){print("style='display:none'");}%> id="btn-favorite-remove">
					<span class="glyphicon glyphicon-heart-empty"></span>&nbsp;取消收藏
				</button>
			</p>
			<p>
				<button class="btn btn-default btn-block" <%if(favorited){print("style='display:none'");}%> id="btn-favorite-add" >
					<span class="glyphicon glyphicon-heart"></span>&nbsp;收藏照片
				</button>
			</p>
			<script>
				$(function(){
					$("#btn-favorite-remove").click(function(){
						var $this = $(this);
						$.get("/photo/favorite/remove/${photo.id}",function(data){
							$("#favorite-count").text(data);
							$this.hide();
							$("#btn-favorite-add").show();		
						},"text");
					});
					$("#btn-favorite-add").click(function(){
						var $this = $(this);
						$.get("/photo/favorite/add/${photo.id}",function(data){
							$("#favorite-count").text(data);
							$this.hide();
							$("#btn-favorite-remove").show();		
						},"text");
					});
				});
			</script>
			<p>
				<button class="btn btn-default btn-block" onclick="showDialog({url:'/photo/fullScreen/${photo.id}',size:'lg'})">
					<span class="glyphicon glyphicon-fullscreen"></span>&nbsp;查看大图
				</button>
			</p>
			<p>
				<a class="btn btn-default btn-block" href="${photo.url}" target="_blank">
					<span class="glyphicon glyphicon-download"></span>&nbsp;下载原图
				</a>
			</p>
			<%if(photo.id!=gallery.coverId&&galleryCreater){%>
			<p>
				<button class="btn btn-default btn-block" id="btn-cover">
					<span class="glyphicon glyphicon-picture"></span>&nbsp;设为封面
				</button>
			</p>
			<script>
				$(function(){
					$("#btn-cover").click(function(){
						var $this = $(this);
						if(!confirm("确定要将这张图片设置为相册的封面吗？")){
							return;
						}
						$.getJSON("/gallery/setCover/${gallery.id}-${photo.id}"
								,function(json){
							if(json.ok){
								$this.replaceWith("<span class='text-success'>成功设置为封面</span>");
							}else{
								alert(json.msg);
							}
						});
					});
				});
			</script>
			<%}%>
			<%if(creater||galleryCreater||admin){%>
			<p>
				<button class="btn btn-default btn-block" id="btn-del">
					<span class="glyphicon glyphicon-trash"></span>&nbsp;删除照片
				</button>
			</p>
			<script type="text/javascript">
				$(function(){
					$("#btn-del").click(function(){
						if(!confirm("照片一旦删除将无法恢复，确定要删除这张照片吗？")){
							return;
						}
						$.getJSON("/photo/delete/${photo.id}",function(json){
							if(!json.ok){
								alert(json.msg);
								return;
							}
							$("#action-area").html("<p class='text-danger'>照片已经被删除</p>");
						});
					});
				});
			</script>
			<%}%>
			</div><!-- action-area -->
		</div>
	</div>
</#cenluan>